<template>
  <el-form :model="editForm" label-width="120px" ref="editForm">
    <el-row>
      <el-col :span="16">
        <el-form-item label="选择对应班级:" prop="class_id">
          <component
              v-bind:is="item.propertyType"
              :property.sync="item"
              v-for="(item, index) in getPower"
              :key="index"
              @updateVal="updateVal"
          ></component>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="选择excel文件:" prop="pic">
      <el-upload
          class="upload-demo"
          :action="$uploadImg"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :before-upload="beforeAvatarUpload"
          multiple
          :file-list="fileList"
          accept=".xlsx,.xls"
          :limit="1">
        <el-button size="small" class="el-icon-upload">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过500kb</div>
      </el-upload>
    </el-form-item>
    <div style="padding:0 20px">
      <el-link type="primary">注：编辑学生信息，需先导出学生模版，在模版中修改所需要调整的学生信息，完成后进行导入</el-link>
    </div>
  </el-form>
</template>

<script>

export default {
  props: [], // commoent 学生点评 collection 学生采集
  components: {},
  data() {
    return {
      editForm: {
        class_id: '', // 班级id
        section_id: '', // 年段id
        file: '', // 文件地址
      }, // 编辑界面数据
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '班级', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      fileList:[]
    }
  },
  watch: {
  },
  created() {
  },
  methods: {
    sibmitFn () {
      let txtLine = JSON.parse(JSON.stringify(this.getPower))
      txtLine.section_id.valueText = ''
      txtLine.section_id.child.valueText = ''
      this.getPower = JSON.parse(JSON.stringify(txtLine))
      this.fileList = []
      if (!this.editForm.class_id) {
        this.$message.error('选择班级')
        return
      }
      if (!this.editForm.file) {
        this.$message.error('请上传相应的Excel文件')
        return
      }
      this.$post(this.api.student.excelEdit, this.editForm).then((response) => {
        if (!response.code) {
          this.$emit('getNewFn')
          this.$message.success(response.msg)
          let txtLine = JSON.parse(JSON.stringify(this.getPower))
          txtLine.section_id.valueText = ''
          txtLine.section_id.child.valueText = ''
          this.getPower = JSON.parse(JSON.stringify(txtLine))
          this.fileList = []
        } else {
          this.$message.error(response.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleRemove (file, fileList) {
      console.log('移除', file, fileList)
      this.editForm.file = ''
    },
    handleSuccess (response) {
      this.editForm.file = response.data.name
    },
    beforeAvatarUpload (file) {
      console.log('上传数据excel：', file)
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.editForm[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.editForm[option.select[i].name] = option.select[i].valueText
          } else {
            this.editForm[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
  },
  mounted() {
  }
}
</script>
<style scoped>

</style>


